<!DOCTYPE html>
<html>
<head>
<title>${title}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Bootstrap core CSS -->
<link href="${ctx}/openmonitor/jui/asserts/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet">
<!--lib js  -->
<script type="text/javascript" src="${ctx}/openmonitor/jui/asserts/jquery-1.11.3/jquery.min.js"></script>
<!-- js加载器 -->
<script type="text/javascript" src="${ctx}/openmonitor/jui/dest/core/jui.config.js"></script>
<script type="text/javascript" src="${ctx}/openmonitor/jui/dest/loader/loader.js"></script>
<style type="text/css">
body {margin: 10px;}
.sch td{padding-left: 10px;}
</style>
</head>
<body>
<div id="frm">
    <table style="width: 100%;">
        <tr>
            <td>接口名：<input id="apiName" name="name" type="text" placeholder="支持模糊查询"/> <button onclick="search();" type="button">查询(Enter)</button></td>
            <td align="right">
            <button id="btn-clean" type="button">清空数据</button>
            <label><input id="autoRefresh" type="checkbox"/>自动刷新 </label> 
                <div style="display: inline-block;"><select id="period" style="display: none;">
                    <option value="1">每1秒刷新</option>
                    <option value="2">每2秒刷新</option>
                    <option value="3" selected="selected">每3秒刷新</option>
                    <option value="4">每4秒刷新</option>
                    <option value="5">每5秒刷新</option>
                    <option value="10">每10秒刷新</option>
                    <option value="20">每20秒刷新</option>
                    <option value="30">每30秒刷新</option>
                    </select>  </div> 
            </td>
        </tr>
    </table>
</div>
<hr>
<div id="grid"></div>

<div id="win" class="hide">
<h6>只显示最后${errorSize}条日志，这里的日志信息直接放在内存中，可根据实际内存配置，修改ApiConfig.monitorErrorQueueSize值，默认5</h6>
    <textarea id="errorTxt" rows="40" style="width: 100%;height: 700px;" readonly="readonly"></textarea>
</div>


<script type="text/javascript">
var jq = jQuery;
var periodSel = jq('#period');
var errorTxt = jq('#errorTxt')
var inter;

/*
 * 表格控件：https://gitee.com/durcframework/jui
 */
JUI
.dir('${ctx}/openmonitor/jui/dest/') // 设置JS存放根目录
.use(['Grid','Form','Win'],function(){
	grid = new JUI.Grid({
		renderId:'grid'
		,url:'${url}/data'
		,rownumbers:true // 显示行索引
		,striped:false // 斑马线,默认true
		,hover:true // 移动高亮
		,pagination :true
        ,pageSize:20
        ,pageList:[0,10,20,50,100]
		,onLoadSuccess:function(e) {
			if(e.data == -1) {
				location.href = 'monitor?q=' + new Date().getTime();
			}
		}
		,columns : [[
			{field : 'name',title : '接口名'},
			{field : 'version',title : '版本号'},
			{field : 'visitCount',title : '访问次数',sortable:true},
			{field : 'errorCount',title : '出错次数',sortable:true, formatter:function(val,obj,index,td){
			     if(val == 0) {
			    	    return val;
			     } else {
			    	    return '<a href="#" class="btn-viewError" style="text-decoration:underline;">'+val+'</a>';
			     }
			     
            }
			},
			{field : 'avgConsumeMilliseconds',title : '平均访问耗时（毫秒）',sortable:true}
			,{field : 'maxConsumeMilliseconds',title : '最大耗时（毫秒）',sortable:true}
			,{field : '_opt',title : '操作',formatter:function(val,obj,index){
                return '<a href="#" class="btn-del">删除</a>';
            }
		    }
		]]
	});
	
	grid.on('ClickCell',function(e){
        var target = $(e.target); // $target即<a>
        if(target.hasClass('btn-viewError')) {
            var row = e.row;
            var errors = row.errors;
            if(errors && errors.length > 0) {
	            win.show();
	            var errorMsg = errors.join('');
	            errorTxt.val(errorMsg);
	            var txtDom = errorTxt.get(0);
	            txtDom.scrollTop = txtDom.scrollHeight;
	            win.max();
            }
        }
        
        if(target.hasClass('btn-del')) {
            var row = e.row;
            var info = '接口名：' + row.name + "，版本号：" + row.version
            JUI.Msg.confirm('删除确认', '确定删除此监控数据吗？<br>' + info, function(r){
                if (r){
                    clean(row.name,row.version);
                }
            });
        }
    });
	
	win = new JUI.Win({
        contentId:'win'
        ,title:'错误信息'
      	,buttons:[
            {text:'关闭',handler:function(){
          	  win.hide();
            }}
         ]
    });
	
	
	form = new JUI.Form({
        formId:'frm'
    });
});

function search() {
	grid.load(form.getData());
}

function periodSearch(seconds) {
    inter = self.setInterval(function(){
        search();
    },parseInt(seconds) * 1000);
}

function clean(name,version) {
	var param = {name:name,version:version};
    jq.ajax({
        type: 'post',
        url: '${url}/del',
        dataType: 'json',
        data: param,
        success: function (data, textStatus, jqXHR) {
            search();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            JUI.Msg.alert('提示','删除数据错误');
        }
    });
}

$('#autoRefresh').click(function(){
	if(this.checked) {
		periodSel.show();
		periodSearch(periodSel.val());
	} else {
		periodSel.hide();	
		window.clearInterval(inter);
	}
});

periodSel.change(function(){
	window.clearInterval(inter);
	periodSearch(this.value);
});


$('#apiName').keyup(function(e){
	if(e.keyCode == 13) {
		search();
	}
});

$('#btn-clean').click(function(){
	JUI.Msg.confirm('删除确认', '确定要清空数据吗？', function(r){
        if (r){
            clean('','');
        }
    });
});
</script>
</body>
</html>